<template>
  <div>
    <button style="z-index: 999" @click="saveMusic">click</button>
    <div class="home">
      <MusicA :list="list" @delmusic="delmusic" @addmusic="addmusic" />
    </div>
  </div>
</template>

<script>
import MusicA from "@/components/music";

export default {
  name: "Home",
  data() {
    return {
      list: [],
    };
  },
  created() {
    setTimeout(() => {
      this.list = [
        {
          name: "极恶都市",
          url: "http://music.163.com/song/media/outer/url?id=570340213.mp3",
          cover:
            "https://img1.baidu.com/it/u=897132545,1609711669&fm=26&fmt=auto",
          lyric:
            "[00:00.000] 作词 : 王星\n[00:01.000] 作曲 : 灰鸿啊/皮皮\n[00:09.00]编曲：夏日入侵企画\n[00:12.61]节奏吉他：肯尼\n[00:16.11]主音吉他：张伟楠\n[00:19.68]贝斯：皮皮\n[00:23.24]鼓：海鑫\n[00:26.75]和声：邢硕\n[00:30.30]音效制作：邢硕\n[00:33.80]录音：邢硕/夏国兴\n[00:37.40]混音：于昊\n[00:40.90]制作人：邢硕\n[00:44.50]特别感谢：张伟楠\n[00:47.55]这城市的车流和这地表的颤抖\n[00:50.86]像一颗石子落入地心之后泛起的温柔\n[00:54.61]暗涌\n[00:55.48]河水流过转角她的楼\n[00:57.92]被梦魇\n[00:59.03]轻声呓语唤醒身后的幼兽\n[01:02.22]失效感官焦灼只剩下\n[01:05.53]麻木愚钝无从感受\n[01:09.23]共同支撑全都瓦解\n[01:12.53]只是我们现在都\n[01:14.28]已忘记到底是\n[01:16.28]谁隐藏春秋\n[01:17.88]谁在大雨之后\n[01:19.63]把旗帜插在最高的楼\n[01:22.74]过去陈旧的还在坚守\n[01:24.95]内心已腐朽\n[01:26.70]摇摇欲坠不停退后\n[01:28.95]毁灭即拯救\n[01:30.50]夏日掠夺春秋\n[01:32.04]结局无法看透\n[01:33.85]眼看这情节开始变旧\n[01:36.95]所有的城池已失守\n[01:39.61]最终无法占有\n[01:54.67]无眠辗转\n[01:55.67]伴着人间破碎的旧梦\n[01:58.01]像繁星\n[01:59.22]退却后只剩下混沌的夜空\n[02:01.86]炙热\n[02:02.71]掩盖风声鹤唳的担忧\n[02:05.17]把所有失落无助反手推入\n[02:07.62]无尽的白昼\n[02:09.83]失效感官焦灼只剩下\n[02:12.62]麻木愚钝无从感受\n[02:16.47]共同支撑全都瓦解\n[02:19.72]只是我们现在都已经忘记到底是\n[02:23.57]谁隐藏春秋\n[02:25.17]谁在大雨之后\n[02:27.02]把旗帜插在最高的楼\n[02:29.98]过去的陈旧还在坚守\n[02:32.23]内心已腐朽\n[02:33.83]摇摇欲坠不停退后\n[02:36.18]毁灭即拯救\n[02:37.74]夏日掠夺春秋\n[02:39.35]结局无法看透\n[02:41.04]眼看这情节开始变旧\n[02:44.29]所有的城池早已失守\n[02:46.29]惶恐难以接受\n[02:48.15]缠绵往复不肯放手\n[02:50.31]最终无法占有\n[03:21.13]谁隐藏春秋\n[03:22.62]谁在大雨之后\n[03:24.37]把旗帜插在最高的楼\n[03:27.43]过去的陈旧还在坚守\n[03:29.65]内心已腐朽\n[03:31.46]摇摇欲坠不停退后\n[03:33.83]毁 灭 即 拯 救\n[03:35.37]谁掠夺春秋\n[03:36.88]谁在大雨之后\n[03:38.57]把旗帜插在最高的楼\n[03:41.68]过去的陈旧还在坚守\n[03:43.94]内心已腐朽\n[03:45.69]摇摇欲坠不停退后\n[03:47.89]毁灭即拯救\n[03:49.14]夏日掠夺春秋\n[03:51.04]结局无法看透\n[03:52.75]明知城池已失守\n[03:54.41]缠绵往复不肯放手\n[04:02.07]最终无法占有\n",
        },
        {
          name: "起风了",
          url: "http://music.163.com/song/media/outer/url?id=1330348068.mp3",
          cover:
            "https://img1.baidu.com/it/u=897132545,1609711669&fm=26&fmt=auto",
          lyric:
            "[00:00.000] 作词 : 米果\n[00:01.000] 作曲 : 高橋優\n[00:02.000] 编曲 : 池窪浩一 (Kouichi Ikekubo)\n[00:25.237]这一路上走走停停\n[00:28.592]顺着少年漂流的痕迹\n[00:31.681]迈出车站的前一刻\n[00:34.795]竟有些犹豫\n[00:37.794]不禁笑这近乡情怯\n[00:41.191]仍无可避免\n[00:43.819]而长野的天\n[00:45.134]依旧那么暖\n[00:46.684]风吹起了从前\n[00:49.153]从前初识这世间\n[00:52.185]万般流连\n[00:53.962]看着天边似在眼前\n[00:56.798]也甘愿赴汤蹈火去走它一遍\n[01:01.966]如今走过这世间\n[01:05.001]万般流连\n[01:06.632]翻过岁月不同侧脸\n[01:09.861]措不及防闯入你的笑颜\n[01:15.513]我曾难自拔于世界之大\n[01:19.605]也沉溺于其中梦话\n[01:22.837]不得真假 不做挣扎 不惧笑话\n[01:28.501]我曾将青春翻涌成她\n[01:31.930]也曾指尖弹出盛夏\n[01:35.281]心之所动 且就随缘去吧\n[01:41.156]逆着光行走 任风吹雨打\n[01:58.028]短短的路走走停停\n[02:01.171]也有了几分的距离\n[02:04.236]不知抚摸的是故事 还是段心情\n[02:10.711]也许期待的不过是 与时间为敌\n[02:16.193]再次看到你\n[02:17.991]微凉晨光里\n[02:19.556]笑得很甜蜜\n[02:22.116]从前初识这世间\n[02:24.937]万般流连\n[02:26.663]看着天边似在眼前\n[02:29.616]也甘愿赴汤蹈火去走它一遍\n[02:34.711]如今走过这世间\n[02:37.657]万般流连\n[02:39.389]翻过岁月不同侧脸\n[02:42.360]措不及防闯入你的笑颜\n[02:48.265]我曾难自拔于世界之大\n[02:52.336]也沉溺于其中梦话\n[02:55.538]不得真假 不做挣扎 不惧笑话\n[03:01.140]我曾将青春翻涌成她\n[03:05.235]也曾指尖弹出盛夏\n[03:08.062]心之所动 且就随缘去吧\n[03:39.324]晚风吹起你鬓间的白发\n[03:43.574]抚平回忆留下的疤\n[03:46.788]你的眼中 明暗交杂 一笑生花\n[03:52.294]暮色遮住你蹒跚的步伐\n[03:56.330]走进床头藏起的画\n[03:59.544]画中的你 低着头说话\n[04:05.074]我仍感叹于世界之大\n[04:08.784]也沉醉于儿时情话\n[04:12.150]不剩真假 不做挣扎 无谓笑话\n[04:17.925]我终将青春还给了她\n[04:21.677]连同指尖弹出的盛夏\n[04:25.007]心之所动 就随风去了\n[04:30.601]以爱之名 你还愿意吗\n[04:38.541]\n[04:43.799] 吉他 : 池窪浩一 (Kouichi Ikekubo)\n[04:49.057] 贝斯 : 小島剛広 (Takehiro Kojima)\n[04:54.315] 鼓 : 吉田佳史 (TRICERATOPS) (Yoshifumi Yoshida(TRICERATOPS))\n[04:59.573] 键盘 : 平畑徹也 (Tetsuya Hirahata)\n[05:04.831] 小提琴 : 須磨和声 (Wasei Suma)\n[05:10.089] 弦乐 : 須磨和声/池窪浩一\n[05:15.347] 录音工程 : 玉乃井光紀 (Mitsunori Tamanoi) - studioFine\n[05:20.605] 发行 : Negia Entertainment Inc.\n[05:25.863] 特别支持：中村光雄(Mitsuo Nakamura)\n",
        },
        {
          name: "你若三冬",
          url: require("./../assets/你若三冬.mp3"),
          cover:
            "https://img1.baidu.com/it/u=897132545,1609711669&fm=26&fmt=auto",
        },
      ];
    }, 1000);
  },
  components: {
    MusicA,
  },
  methods: {
    delmusic(item, index) {
      console.log(1, item, index);
      this.list.splice(index, 1);
    },
    addmusic(item) {
      console.log(2, item);
    },
    saveMusic() {
      this.list = [
        {
          name: "极恶都市",
          url: "http://music.163.com/song/media/outer/url?id=570340213.mp3",
          cover:
            "https://img1.baidu.com/it/u=897132545,1609711669&fm=26&fmt=auto",
          lyric:
            "[00:00.000] 作词 : 王星\n[00:01.000] 作曲 : 灰鸿啊/皮皮\n[00:09.00]编曲：夏日入侵企画\n[00:12.61]节奏吉他：肯尼\n[00:16.11]主音吉他：张伟楠\n[00:19.68]贝斯：皮皮\n[00:23.24]鼓：海鑫\n[00:26.75]和声：邢硕\n[00:30.30]音效制作：邢硕\n[00:33.80]录音：邢硕/夏国兴\n[00:37.40]混音：于昊\n[00:40.90]制作人：邢硕\n[00:44.50]特别感谢：张伟楠\n[00:47.55]这城市的车流和这地表的颤抖\n[00:50.86]像一颗石子落入地心之后泛起的温柔\n[00:54.61]暗涌\n[00:55.48]河水流过转角她的楼\n[00:57.92]被梦魇\n[00:59.03]轻声呓语唤醒身后的幼兽\n[01:02.22]失效感官焦灼只剩下\n[01:05.53]麻木愚钝无从感受\n[01:09.23]共同支撑全都瓦解\n[01:12.53]只是我们现在都\n[01:14.28]已忘记到底是\n[01:16.28]谁隐藏春秋\n[01:17.88]谁在大雨之后\n[01:19.63]把旗帜插在最高的楼\n[01:22.74]过去陈旧的还在坚守\n[01:24.95]内心已腐朽\n[01:26.70]摇摇欲坠不停退后\n[01:28.95]毁灭即拯救\n[01:30.50]夏日掠夺春秋\n[01:32.04]结局无法看透\n[01:33.85]眼看这情节开始变旧\n[01:36.95]所有的城池已失守\n[01:39.61]最终无法占有\n[01:54.67]无眠辗转\n[01:55.67]伴着人间破碎的旧梦\n[01:58.01]像繁星\n[01:59.22]退却后只剩下混沌的夜空\n[02:01.86]炙热\n[02:02.71]掩盖风声鹤唳的担忧\n[02:05.17]把所有失落无助反手推入\n[02:07.62]无尽的白昼\n[02:09.83]失效感官焦灼只剩下\n[02:12.62]麻木愚钝无从感受\n[02:16.47]共同支撑全都瓦解\n[02:19.72]只是我们现在都已经忘记到底是\n[02:23.57]谁隐藏春秋\n[02:25.17]谁在大雨之后\n[02:27.02]把旗帜插在最高的楼\n[02:29.98]过去的陈旧还在坚守\n[02:32.23]内心已腐朽\n[02:33.83]摇摇欲坠不停退后\n[02:36.18]毁灭即拯救\n[02:37.74]夏日掠夺春秋\n[02:39.35]结局无法看透\n[02:41.04]眼看这情节开始变旧\n[02:44.29]所有的城池早已失守\n[02:46.29]惶恐难以接受\n[02:48.15]缠绵往复不肯放手\n[02:50.31]最终无法占有\n[03:21.13]谁隐藏春秋\n[03:22.62]谁在大雨之后\n[03:24.37]把旗帜插在最高的楼\n[03:27.43]过去的陈旧还在坚守\n[03:29.65]内心已腐朽\n[03:31.46]摇摇欲坠不停退后\n[03:33.83]毁 灭 即 拯 救\n[03:35.37]谁掠夺春秋\n[03:36.88]谁在大雨之后\n[03:38.57]把旗帜插在最高的楼\n[03:41.68]过去的陈旧还在坚守\n[03:43.94]内心已腐朽\n[03:45.69]摇摇欲坠不停退后\n[03:47.89]毁灭即拯救\n[03:49.14]夏日掠夺春秋\n[03:51.04]结局无法看透\n[03:52.75]明知城池已失守\n[03:54.41]缠绵往复不肯放手\n[04:02.07]最终无法占有\n",
        },
        {
          name: "起风了",
          url: "http://music.163.com/song/media/outer/url?id=1330348068.mp3",
          cover:
            "https://img1.baidu.com/it/u=897132545,1609711669&fm=26&fmt=auto",
          lyric:
            "[00:00.000] 作词 : 米果\n[00:01.000] 作曲 : 高橋優\n[00:02.000] 编曲 : 池窪浩一 (Kouichi Ikekubo)\n[00:25.237]这一路上走走停停\n[00:28.592]顺着少年漂流的痕迹\n[00:31.681]迈出车站的前一刻\n[00:34.795]竟有些犹豫\n[00:37.794]不禁笑这近乡情怯\n[00:41.191]仍无可避免\n[00:43.819]而长野的天\n[00:45.134]依旧那么暖\n[00:46.684]风吹起了从前\n[00:49.153]从前初识这世间\n[00:52.185]万般流连\n[00:53.962]看着天边似在眼前\n[00:56.798]也甘愿赴汤蹈火去走它一遍\n[01:01.966]如今走过这世间\n[01:05.001]万般流连\n[01:06.632]翻过岁月不同侧脸\n[01:09.861]措不及防闯入你的笑颜\n[01:15.513]我曾难自拔于世界之大\n[01:19.605]也沉溺于其中梦话\n[01:22.837]不得真假 不做挣扎 不惧笑话\n[01:28.501]我曾将青春翻涌成她\n[01:31.930]也曾指尖弹出盛夏\n[01:35.281]心之所动 且就随缘去吧\n[01:41.156]逆着光行走 任风吹雨打\n[01:58.028]短短的路走走停停\n[02:01.171]也有了几分的距离\n[02:04.236]不知抚摸的是故事 还是段心情\n[02:10.711]也许期待的不过是 与时间为敌\n[02:16.193]再次看到你\n[02:17.991]微凉晨光里\n[02:19.556]笑得很甜蜜\n[02:22.116]从前初识这世间\n[02:24.937]万般流连\n[02:26.663]看着天边似在眼前\n[02:29.616]也甘愿赴汤蹈火去走它一遍\n[02:34.711]如今走过这世间\n[02:37.657]万般流连\n[02:39.389]翻过岁月不同侧脸\n[02:42.360]措不及防闯入你的笑颜\n[02:48.265]我曾难自拔于世界之大\n[02:52.336]也沉溺于其中梦话\n[02:55.538]不得真假 不做挣扎 不惧笑话\n[03:01.140]我曾将青春翻涌成她\n[03:05.235]也曾指尖弹出盛夏\n[03:08.062]心之所动 且就随缘去吧\n[03:39.324]晚风吹起你鬓间的白发\n[03:43.574]抚平回忆留下的疤\n[03:46.788]你的眼中 明暗交杂 一笑生花\n[03:52.294]暮色遮住你蹒跚的步伐\n[03:56.330]走进床头藏起的画\n[03:59.544]画中的你 低着头说话\n[04:05.074]我仍感叹于世界之大\n[04:08.784]也沉醉于儿时情话\n[04:12.150]不剩真假 不做挣扎 无谓笑话\n[04:17.925]我终将青春还给了她\n[04:21.677]连同指尖弹出的盛夏\n[04:25.007]心之所动 就随风去了\n[04:30.601]以爱之名 你还愿意吗\n[04:38.541]\n[04:43.799] 吉他 : 池窪浩一 (Kouichi Ikekubo)\n[04:49.057] 贝斯 : 小島剛広 (Takehiro Kojima)\n[04:54.315] 鼓 : 吉田佳史 (TRICERATOPS) (Yoshifumi Yoshida(TRICERATOPS))\n[04:59.573] 键盘 : 平畑徹也 (Tetsuya Hirahata)\n[05:04.831] 小提琴 : 須磨和声 (Wasei Suma)\n[05:10.089] 弦乐 : 須磨和声/池窪浩一\n[05:15.347] 录音工程 : 玉乃井光紀 (Mitsunori Tamanoi) - studioFine\n[05:20.605] 发行 : Negia Entertainment Inc.\n[05:25.863] 特别支持：中村光雄(Mitsuo Nakamura)\n",
        },
        {
          name: "你若三冬",
          url: require("./../assets/你若三冬.mp3"),
          cover:
            "https://img1.baidu.com/it/u=897132545,1609711669&fm=26&fmt=auto",
        },
      ];
    },
  },
};
</script>

<style scoped>
.home {
  height: 80px;
  width: 1000px;
  margin: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
